Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updates 'inactive' state for buttons #2379

Merged
merged 12 commits into from
Nov 21, 2023
Merged

Conversation

mperrotti
Copy link
Contributor

Authors: Please fill out this form carefully and completely.

Reviewers: By approving this Pull Request you are approving the code change, as well as its deployment and mitigation plans.
Please read this description carefully. If you feel there is anything unclear or missing, please ask for updates.

What are you trying to accomplish?

Implements feedback from a11y team:

  • inactive buttons need to meet the color contrast ratio minimum
  • inactive buttons shouldn't have aria-disabled since they can still accept interactions such as:
    • hover/focus to show a tooltip
    • click/activate to show a dialog with more detailed info on why it's inactive

Screenshots

Mock of inactive button states

Integration

  • upgrade @primer/primitives to 7.15.1

List the issues that this change affects.

Relates to https://github.com/github/primer/issues/2676

Risk Assessment

  • Low risk the change is small, highly observable, and easily rolled back.
  • Medium risk changes that are isolated, reduced in scope or could impact few users. The change will not impact library availability.
  • High risk changes are those that could impact customers and SLOs, low or no test coverage, low observability, or slow to rollback.

What approach did you choose and why?

Add a new class that styles all button variants' "inactive" state the same.

Anything you want to highlight for special attention from reviewers?

Can't think of anything

Accessibility

  • No new axe scan violation - This change does not introduce any new axe scan violations.

Merge checklist

  • Added/updated tests
  • Added/updated documentation
  • Added/updated previews (Lookbook)
  • Tested in Chrome
  • Tested in Firefox
  • Tested in Safari
  • Tested in Edge

Take a look at the What we look for in reviews section of the contributing guidelines for more information on how we review PRs.

@mperrotti mperrotti requested a review from a team as a code owner November 14, 2023 16:29
@mperrotti mperrotti requested review from a team, lukasoppermann and keithamus November 14, 2023 16:29
Copy link

changeset-bot bot commented Nov 14, 2023

🦋 Changeset detected

Latest commit: 60f0916

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/view-components Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions bot added ruby Pull requests that update Ruby code css Pull requests that update CSS code labels Nov 14, 2023
Copy link
Contributor

⚠️ Visual differences found

Our visual comparison tests found UI differences. Please review the differences by viewing the files changed tab to ensure that the changes were intentional.

Review visual differences

@mperrotti
Copy link
Contributor Author

Holding off on merging this for now. We may need another @primer/primitives upgrade...

@mperrotti
Copy link
Contributor Author

@primer/primitives upgrade done. Safe to merge.

@mperrotti mperrotti enabled auto-merge (squash) November 21, 2023 18:04
@camertron camertron disabled auto-merge November 21, 2023 19:39
@camertron camertron merged commit 2c59c33 into main Nov 21, 2023
29 checks passed
@camertron camertron deleted the mp/inactive-button-a11y-updates branch November 21, 2023 19:39
@primer primer bot mentioned this pull request Nov 21, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css Pull requests that update CSS code patch release ruby Pull requests that update Ruby code
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants